import { Button } from "antd-mobile";
import React, { useEffect, useState } from "react";
import "./select.less";
import SubItem from "./SubItem";
import { questionTypesApi } from "@/api";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { questionTypeMapData } from "@/utils/utils";

const testTypes: SelectListProp[] = [
  { en: "all", cn: "全部" },
  { en: "notdone", cn: "未做" },
  { en: "done", cn: "已做" },
  { en: "err", cn: "错误" },
];

const testNums: SelectListProp[] = [
  { en: "5", cn: "5" },
  { en: "10", cn: "10" },
  { en: "20", cn: "20" },
  { en: "30", cn: "30" },
  { en: "50", cn: "50" },
  { en: "100", cn: "100" },
];

export default function Select() {
  const { pathname } = useLocation();
  console.log(pathname);

  const navigate = useNavigate();
  // 从路由参数获取actionCode
  const { actionCode } = useParams<{ actionCode: string }>();

  const [questionTypes, setQuestionTypes] = useState<SelectListProp[]>([]);

  // 将后端返回的动态的题目类型的数据转换为我们想要的 在页面上渲染的数据的思路
  /*
    每个英文和中文是一一对应的，所以先把 英文和中文的关系建立起来 ， 用对象，先把英文和中文存起来
    再根据后端返回的对象的key对应的英文，获取 关系的对象的中文
  */

  useEffect(() => {
    if (actionCode) {
      questionTypesApi(actionCode).then((res) => {
        // 把数据请求回来之后，在页面上渲染
        if (res.errCode === 0) {
          // 把后端返回的数据进行转换
          // 目标： {cn:中文+数量,en:英文}  ===> {cn: mapdata[数据.key]+数据.vlaue , en: 数据.key}
          const questionTypes = res.data.map((item) => {
            return {
              en: item.key,
              cn: questionTypeMapData[item.key] + item.value,
            };
          });
          setQuestionTypes(questionTypes);
        }
      });
    }
  }, []);

  // 定义三个数据，用来保存组件里面点击的时候选中的数据
  let testType = "all";
  let questionType = "all";
  let testNum = "5";

  const toPractice = () => {
    // console.log(testType, questionType, testNum);
    navigate("/pra", {
      state: {
        actionCode,
        testNum,
        questionType,
        testType,
      },
    });
  };

  return (
    <div className="select">
      <div className="flex flex-between">
        <Button color="primary" fill="solid" onClick={toPractice}>
          进入练习模式
        </Button>
        <Button color="warning" fill="solid">
          进入考试模式
        </Button>
      </div>
      <SubItem
        onChange={(value: string) => (testType = value)}
        title="试题分类"
        list={testTypes}
      />
      <SubItem
        onChange={(value: string) => (questionType = value)}
        title="题目分类"
        list={questionTypes}
      />
      <SubItem
        onChange={(value: string) => (testNum = value)}
        title="做题数量"
        list={testNums}
      />
    </div>
  );
}
